<template>
  <div class="app-search" @click.self="close">
    <div class="app-search-wrapper">
      <div class="container">
        <div class="my-3">
          <div class="input-holder append bg-light rad-30">
            <i class="ti-search"></i>
            <input class="form-control" placeholder="Search..." autofocus>
            <i class="ti-close"></i>
          </div>
        </div>
        <div>
          <div class="checkbox">
            <label class="ui-check"><input type="checkbox" checked=""><i></i> Search within app</label>
            <label class="ui-check"><input type="checkbox"><i></i> Extended</label>
          </div>
        </div>
        <div class="mt-3">
          <div class="bg-light bb-l">Suggestions</div>
          <div :key="item" v-for="item in 3">Example of search suggestions</div>
        </div>
        <div class="mt-3">
          <div class="bg-light bb-l">Results</div>
          <div :key="item" v-for="item in 4">
            <i class="ti-search"></i>
            <span class="h4 m-0">Lorem ipsum dolor</span>
            <div class="text-muted font-xs">Example of search results Example of search results Example of search results</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'appSearch',
  methods: {
    close () {
      this.$el.classList.remove('app-search-show')
    }
  }
}
</script>

<style lang="scss">
  .app-search {
    background-color: rgba(255, 255, 255, .75);
    transition: transform .5s cubic-bezier(.5, 1.5, .1, .8);
    transform: translateY(-100%);
    overflow: hidden;
    position: fixed;
    z-index: 21;
    height: auto;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    &.app-search-show {
      transform: translateY(0)
    }
    .app-search-wrapper {
      background-color: rgba(255, 255, 255, .9);
      box-shadow: 0 0 9px rgba(191, 191, 191, .36);
      overflow-y: auto
    }
  }
</style>
